<script type="text/javascript"><!--//--><![CDATA[//><!--
	console.clear();
    
    var grid_reload = function() {
        $('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
    };

    var f_status = function(val) {
        return (val == '1' ? '<img src="' + gs_path + '/content/images/ico_success.png" title="Setuju" />' : '<img src="' + gs_path + '/content/images/delete.png" title="Tidak Setuju" />');
    };
    
    $(document).ready(function() {
    	$('#nama_karyawan_cari').readonly();

		$('#fm_search').setupForm([
			{ name: 'id_karyawan_cari', type: 'lov', size: 'short', 
				onClearButton:function(){
					$(this).setval(''); 
					$('#nama_karyawan_cari').setval('');
					grid_reload();
				},
				onActionButton:function(){ 
					LOVCoreKaryawan({ onSelect:function(row){ 
						$('#id_karyawan_cari').setval(row.id_karyawan_pk); 
						$('#nama_karyawan_cari').setval(row.nama_karyawan); 
						grid_reload();
					} });
				}
			}
		]);

		// lov untuk mencari karyawan di modal
		$('#fm_search').setupForm([
			{ name: 'id_karyawan_fk', type: 'lov', size: 'short', 
				onClearButton:function(){
					$(this).setval(''); 
					$('#nama_karyawan').setval('');
				},
				onActionButton:function(){ 
					LOVCoreKaryawan({ onSelect:function(row){ 
						$('#id_karyawan_fk').setval(row.id_karyawan_pk); 
						$('#nama_karyawan').setval(row.nama_karyawan); 
					} });
				}
			}
		]);

		// lov untuk manager
		$('#fm_search').setupForm([
			{ name: 'id_manager', type: 'lov', size: 'short', 
				onClearButton:function(){
					$(this).setval(''); 
					$('#manager').setval('');
				},
				onActionButton:function(){ 
					LOVCoreKaryawan({ onSelect:function(row){ 
						$('#id_manager').setval(row.id_karyawan_pk); 
						$('#manager').setval(row.nama_karyawan); 
					} });
				}
			}
		]);

		// lov untuk supervisi
		$('#fm_search').setupForm([
			{ name: 'id_supervisi', type: 'lov', size: 'short', 
				onClearButton:function(){
					$(this).setval(''); 
					$('#supervisi').setval('');
				},
				onActionButton:function(){ 
					LOVCoreKaryawan({ onSelect:function(row){ 
						$('#id_supervisi').setval(row.id_karyawan_pk); 
						$('#supervisi').setval(row.nama_karyawan); 
					} });
				}
			}
		]);

		// lov untuk hrd
		$('#fm_search').setupForm([
			{ name: 'id_hrd', type: 'lov', size: 'short', 
				onClearButton:function(){
					$(this).setval(''); 
					$('#hrd').setval('');
				},
				onActionButton:function(){ 
					LOVCoreKaryawan({ onSelect:function(row){ 
						$('#id_hrd').setval(row.id_karyawan_pk); 
						$('#hrd').setval(row.nama_karyawan); 
					} });
				}
			}
		]);
		
		$('#tgl_awal, #tgl_akhir').setDatePicker();
        // $('#tgl_awal').setval('<?php echo date_format3(NOW, '01/MM/YYYY'); ?>');
        $('#tgl_awal').setval('<?php echo date_format3(NOW, '01/10/2013'); ?>');
		$('#tgl_akhir').setval('<?php echo @date('t/m/Y'); ?>');
		
		// Setup Datagrid
		$('#datagrid').datagrid({  
			url:gs_path+'/'+controller+'/getdata', 
			queryParams: $('#fm_search').serializeObject(),
			height:405,
			// width:1000,
			// fitColumns:true,
			pagination:true,
			// singleSelect:true,
			frozenColumns: [[
				{ field : 'ck', checkbox:true, width: 40, align: 'center' },
				{ field : 'id_karyawan_fk', title : 'NIK', width : 70, sortable:true },
				{ field : 'nama_karyawan', title : 'Nama Karyawan', width : 150, sortable:true },
				{ field : 'status_cuti', title : 'Status', width : 50, align:"center", sortable:true, formatter:f_status },
			]],
			columns:[[
				{ field : 'ket_jenis_cuti', title : 'Jenis Cuti', width : 90, sortable:true },
				{ field : 'tgl_surat', title : 'Tgl Surat', width : 80, sortable:true },
				{ field : 'no_surat', title : 'No Surat', width : 70, sortable:true },
				{ field : 'jml_hari', title : 'Jumlah Hari', width : 80, sortable:true },
				{ field : 'tgl_mulai', title : 'Tgl Mulai', width : 80, sortable:true },
				{ field : 'tgl_selesai', title : 'Tgl Selesai', width : 70, sortable:true },
				// { field : 'manager', title : 'Manager', width : 120, sortable:true },
				// { field : 'supervisi', title : 'Supervisi', width : 120, sortable:true },
				// { field : 'hrd', title : 'Hrd', width : 120, sortable:true },
				{ field : 'ket_cuti', title : 'Ket Cuti', width : 300, sortable:true },
			]],
			rownumbers: true
		});

		// Setup Form
        $('#form_master').setupForm([
            { name: 'id_cuti_pk', type: 'text', size: 'medium', maxlength: 10, noempty:true },
            { name: 'id_karyawan_fk', type: 'text', noempty:true },
            { name: 'id_jenis_cuti_fk', data:<?php echo json_encode($listJenisCuti); ?> },
            { name: 'no_surat', type: 'text', size: 'medium', maxlength: 100, noempty:true },
            { name: 'tgl_surat', type: 'date', noempty:true },
            { name: 'jml_hari', type: 'text', maxlength: 3 },
            { name: 'tgl_mulai', type: 'date' },
            { name: 'tgl_selesai', type: 'date' },
            { name: 'ket_cuti', type: 'text', size: 'long', maxlength: 255 },
            { name: 'manager', type: 'text' },
            { name: 'id_manager', type: 'text' },
            { name: 'supervisi', type: 'text' },
            { name: 'id_supervisi', type: 'text' },
            { name: 'hrd', type: 'text' },
            { name: 'id_hrd', type: 'text' },
            { name: 'status_cuti', data:[{"value":"0","display":"Tidak Setuju"},{"value":"1","display":"Setuju"}] },
            { name: 'nama_karyawan', type: 'text' },
        ]);

        // hide input
        $('#id_cuti_pk').hide();
        
        // Create Dialog
        $('#dialog_container').dialog({
            closed:true,
            modal:true,
            title: '_',
            width:600,
            height:420,
            buttons:[{
                text:'Save',
                iconCls:'icon-save',
                handler:function(){
                    $('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); }} );
                }
            },{
                text:'Close',
                iconCls:'icon-cancel',
                handler:function(){
                    $('#dialog_container').dialog('close');
                }
            }]
        });
        
        // Set Action Button
        var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
                            resetError();
                            $('#dialog_container').dialog('open');
                            $('#form_master').data('mode', 'create');
                            $('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Role');
                            $('#id_cuti_pk').readonly(false);
                            $('#id_cuti_pk, #no_surat, #ket_cuti, #id_karyawan_fk, #nama_karyawan, #tgl_surat, #jml_hari, #tgl_mulai, #tgl_selesai, #manager, #supervisi, #hrd, #status_cuti, #id_manager, #id_supervisi, #id_hrd').val('');
                            $('#id_karyawan_fk').focus();
                            $('#nama_karyawan').readonly();
                            $('#manager').readonly();
                            $('#supervisi').readonly();
                            $('#hrd').readonly();
                        } },
                        { label: 'Edit', icon: 'edit', onclick: function() {
                            var oSel=$('#datagrid').datagrid('getSelected'); 
                            if(oSel==null){ 
                                alert('Please select row!'); 
                            } else{ 
                                resetError();
                                $('#dialog_container').dialog('open'); 
                                $('#form_master').data('mode', 'edit');
                                $('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Role');
                                $('#id_cuti_pk').readonly();
                                jsonToForm(oSel); 
                                $('#id_karyawan_fk').focus();
                                $('#nama_karyawan').readonly();
	                            $('#manager').readonly();
	                            $('#supervisi').readonly();
	                            $('#hrd').readonly();
                            } 
                        } },
                        {label: 'Delete', icon: 'delete', onclick: function() { 
                            var oSel = $('#datagrid').datagrid('getSelected'); 
                            if (oSel == null) { 
                                $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
                            } else { 
                                deleteData(['id_cuti_pk']);
                            } 
                        }}];
        setAction(buttons);
		
		
		$('#fm_search').focusFirst();
    });
//--><!]]>
</script>

    
<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" method="post" onsubmit="grid_reload(); return false;">
        	<table class="tb_form" style="margin-bottom:0px">
            <tr>
            	<td width="100">Karyawan</td>
                <td><input type="text" id="id_karyawan_cari" name="id_karyawan_cari" class="textfield short" /> <input type="text" id="nama_karyawan_cari" name="nama_karyawan_cari" class="textfield medium" /></td>
            </tr>
            <tr>
            	<td>Tgl. Absen</td>
                <td><input type="text" id="tgl_awal" name="tgl_awal" />_ &nbsp; <input type="text" id="tgl_akhir" name="tgl_akhir" /> 
                	<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                    <!-- <a href="#" class="easyui-linkbutton" iconCls="icon-blank-file" onclick="$('#fm_search').resetForm(); return false;">Reset</a> -->
                    <input type="submit" style="display:none" />
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>

<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
    <form id="form_master">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <!-- <tr>
        <td class="label" style="width:150px">Id</td>
        <td><input id="id_cuti_pk" /></td>
    </tr> -->
    <input id="id_cuti_pk" />
    <tr>
        <td class="label" style="width:150px">Karyawan</td>
        <td><input id="id_karyawan_fk" />_ <input id="nama_karyawan" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Jenis Cuti</td>
        <td><input id="id_jenis_cuti_fk" /></td>
    </tr>
    <tr>
        <td class="label">No Surat</td>
        <td><input id="no_surat" /></td>
    </tr>
    <tr>
        <td class="label">Tgl Surat</td>
        <td><input id="tgl_surat" /></td>
    </tr>
    <tr>
        <td class="label">Jumlah Hari</td>
        <td><input id="jml_hari" /></td>
    </tr>
    <tr>
        <td class="label">Tgl Mulai - Selesai</td>
        <td><input id="tgl_mulai" />_ &nbsp; <input id="tgl_selesai" /></td>
    </tr>
    <tr>
        <td class="label">Keterangan</td>
        <td><input id="ket_cuti" /></td>
    </tr>
    <!-- <tr>
        <td class="label">Manager</td>
        <td><input id="id_manager" />_ <input id="manager" /></td>
    </tr>
    <tr>
        <td class="label">Supervisi</td>
        <td><input id="id_supervisi" />_ <input id="supervisi" /></td>
    </tr>
    <tr>
        <td class="label">Hrd</td>
        <td><input id="id_hrd" />_ <input id="hrd" /></td>
    </tr> -->
    <tr>
        <td class="label">Status Cuti</td>
        <td><input id="status_cuti" /></td>
    </tr>
    </table>
    </form>
</div>